<template>
   <view>
      <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]" :class="isf ? 'isfs' : ''">
         <view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
            <view class="action" @tap="BackPage" v-if="isBack">
               <text class="cuIcon-back" :class="backColor ? backColor : ''"></text>
               <slot name="backText"></slot>
            </view>
            <view class="content text-bold" :style="[{ top: StatusBar + 'px' }]"><slot name="content"></slot></view>
            <!-- #ifdef H5 -->
            <view class="action"><slot name="right"></slot></view>
            <!-- #endif -->
         </view>
         <!--  -->
      </view>
   </view>
</template>

<script>
export default {
   data() {
      return {
         StatusBar: this.StatusBar,
         CustomBar: this.CustomBar
      };
   },
   name: 'cu-custom',
   computed: {
      style() {
         var StatusBar = this.StatusBar;
         var CustomBar = this.CustomBar;
         var bgImage = this.bgImage;
         var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
         if (this.bgImage) {
            style = `${style}background-image:url(${bgImage});`;
         }
         return style;
      }
   },
   props: {
      // 背景图颜色
      bgColor: {
         type: String,
         default: ''
      },
      // 时候返回
      isBack: {
         type: [Boolean, String],
         default: false
      },
      // 背景图
      bgImage: {
         type: String,
         default: ''
      },
      // 返回颜色
      backColor: {
         type: String,
         default: ''
      },
      // 固定到顶部
      isf: {
         type: Boolean,
         default: false
      },
      // 是否显示loading
      loading: {
         type: Boolean,
         default: false
      },
      // 加载loading 文字
      text: {
         type: String,
         default: 'loading.....'
      }
   },
   methods: {
      BackPage() {
         uni.navigateBack({
            delta: 1
         });
      }
   }
};
</script>

<style>
.bg-transparent {
   background-color: transparent !important;
}
.isfs {
   position: fixed;
}
</style>
